<template>

  <div>
    <div style="font-family: 华文彩云; text-align: center;line-height: 50px;color: #409EFF;font-size: 30px" >
      问卷邢用户意见调研
    </div>

    <div style="text-align: center;font-family: 微软雅黑">
      “问卷邢”的发展离不开您的支持，为了完善我们的产品及服务,请提交您的反馈建议给我们,我们将因您而变!
    </div>
    <el-divider></el-divider>


    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple-light">
        <div>
          <div style="text-align: left;line-height: 50px;font-family: 微软雅黑">
            1. 总体而言，您对我们“问卷邢”产品是否满意呢？
          </div>
          <div>
            <el-rate style="text-align: center;"
                     v-model="value[0]"
                     :colors="colors"
                     show-text
                     :texts="text1"
                     allow-half
                     @change="changeV1"
                     text-color="#579CDC"
            >
            </el-rate>
          </div>
        </div>
      </div></el-col>
    </el-row>

    <el-row type="flex" class="row-bg" justify="center" v-show="show1">
      <el-col :span="6"><div class="grid-content bg-purple-dark">
        <div>
          <div style="text-align: left;line-height: 50px;font-family: 微软雅黑">
            2. 请问您对我们的产品哪方面不满意呢？
          </div>
          <div>
            <el-input
              type="textarea"
              v-model="textarea1"
              autosize
              placeholder="请留下您宝贵的意见"
              style="width: 500px;flex: auto;align-items: stretch"
            ></el-input>
          </div>
        </div>
      </div></el-col>
    </el-row>

    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple-light">
        <div>
          <div style="text-align: left;line-height: 50px;font-family: 微软雅黑">
            3. 您向身边人推荐“问卷邢”的概率有多大呢？
          </div>
          <div>
            <el-rate style="text-align: center;"
                     v-model="value[1]"
                     :colors="colors"
                     show-text
                     :texts="text2"
                     allow-half
                     @change="changeV2"
                     text-color="#579CDC"
            >
            </el-rate>
          </div>
        </div>
      </div></el-col>
    </el-row>

    <el-row type="flex" class="row-bg" justify="center" v-show="show2">
      <el-col :span="6"><div class="grid-content bg-purple-dark">
        <div>
          <div style="text-align: left;line-height: 50px;font-family: 微软雅黑">
            4. 可以留下您这么选择的原因吗？
          </div>
          <div>
            <el-input
              type="textarea"
              v-model="textarea2"
              autosize
              placeholder="请留下您宝贵的意见"
              style="width: 500px;flex: auto;align-items: stretch"
            ></el-input>
          </div>
        </div>
      </div></el-col>
    </el-row>

    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple-light">
        <div>
          <div style="text-align: left;line-height: 30px;font-family: 微软雅黑">
            5. 你希望我们为您提供什么?做哪些改进?
            您的意见对我们非常重要，"问卷邢"的前进离不开您的支持与建议。
          </div>
          <div>
            <el-input
              type="textarea"
              v-model="textarea3"
              autosize
              placeholder="请留下您宝贵的意见"
              style="width: 500px;flex: auto;align-items: stretch"
            ></el-input>
          </div>
        </div>
      </div></el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" plain @click="submit">提交</el-button>
      </el-col>
    </el-row>

    <el-divider></el-divider>

    <div style="text-align: center;font-family: 微软雅黑">
      由衷的感谢您百忙之中填写我们的意见反馈，我们将听取您的意见不断优化我们的产品，祝您生活愉快！
    </div>


  </div>


</template>

<script>

export default {
  name: "feedbackPage",
  data() {
    return {
      value: ['', ''],
      show1: false,
      show2: false,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      text1: ['十分不满', '不满意', '还凑活', '比较满意', '非常满意'],
      text2: ['绝不可能', '不太可能', '有可能', '很可能', '极有可能'],
      textarea1:'',
      textarea2:'',
      textarea3:''

    }
  },
  methods: {
    changeV1(value) {
      if (value <= 3) {
        this.show1 = true
      } else {
        this.show1 = false
      }
    },
    changeV2(value) {
      if (value <= 3) {
        this.show2 = true
      } else {
        this.show2 = false
      }
    },
    reset(){
      this.show1 = false
      this.show2 = false
      this.textarea1 = ''
      this.textarea2 = ''
      this.textarea3 = ''
      this.value[0] = ''
      this.value[1] = ''
    },
    submit(){
      this.$message.success("提交成功,感谢您的意见!!");
      this.reset()
    }
  }
}
</script>


<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  width: 500px;
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 5px 0;
  background-color: #f6f6f6;
}
</style>
